<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i>用户列表
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <!--  -->
            <div class="handle-box">
				<!-- 搜索问卷问题 -->
                <span class="search-title">昵称：</span>
                <el-input v-model="query.param.userName" placeholder="用户名" class="handle-input mr10"></el-input>
                <span class="search-title">手机号：</span>
                <el-input v-model="query.param.phone" placeholder="手机号" class="handle-input mr10"></el-input>
                <span class="search-title">用户类型：</span>
                <el-select v-model="query.param.userType" placeholder="类型" class="handle-select mr10">
                    <el-option key="1" label="前端用户" value="1"></el-option>
                    <el-option key="2" label="管理员" value="2"></el-option>
                    <el-option key="3" label="超级管理员" value="3"></el-option>
                </el-select>
                <span class="search-title">用户状态：</span>
                <el-select v-model="query.param.status" placeholder="状态" class="handle-select mr10">
                    <el-option key="1" label="正常" value="1"></el-option>
                    <el-option key="2" label="冻结" value="2"></el-option>
                </el-select>
				<!-- 搜索按钮 -->
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                <!-- 批量冻结 -->
            </div>
            <!-- 用户列表 -->
            <el-table 
                :data="tableData" 
                border 
                class="table" 
                ref="multipleTable" 
                header-cell-class-name="table-header" 
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="60" align="center" prop="id"></el-table-column>.
                <el-table-column prop="id" label="ID"  align="center"></el-table-column>
                <!-- 用户名 -->
                <el-table-column prop="userName" label="用户名"  align="center"></el-table-column>
                <!-- 真实姓名 -->
                <el-table-column prop="trueName" label="真实姓名"  align="center"></el-table-column>
                <!-- 产品图片 -->
                <el-table-column label="头像" align="center" >
                    <template slot-scope="scope">
						<el-image class="table-td-thumb" :src="scope.row.headImageUrl"></el-image></template>
                </el-table-column>
                <!-- 手机号 -->
                <el-table-column prop="phone" label="手机号"  align="center"></el-table-column>
                <!-- 邮箱 
                <el-table-column prop="email" label="邮箱"  align="center"></el-table-column>-->
                <el-table-column prop="apply" label="权力"  align="center" >
                    <template slot-scope="scope">
                        {{scope.row.userType == 1 ? '前端用户' : ''}}
                        {{scope.row.userType == 2 ? '管理员' : ''}}
                        {{scope.row.userType == 3 ? '超级管理员' : ''}}
                    </template>
                </el-table-column>
                <!-- 注册时间 -->
                <el-table-column prop="registerTime" label="注册时间 " width="180" align="center"></el-table-column>
                <!-- 最后登陆时间 -->
                <el-table-column prop="lastLoginTime" label="最后登陆时间 " width="180" align="center"></el-table-column>
                <el-table-column label="标签" width="140" align="center">
                    <template slot-scope="scope">
                        <p>VIP：
                            <el-switch @change="handlePublishStatusChange(scope.$index, scope.row)" :active-value="1"
                                       :inactive-value="0" v-model="scope.row.vipLevel">
                            </el-switch>
                        </p>
                        <p>状态：
                            <el-switch @change="updateStatus(scope.$index, scope.row)" :active-value="1"
                                       :inactive-value="0" v-model="scope.row.status">
                            </el-switch>
                        </p>
                    </template>
                </el-table-column>
                <!--1-正常 2-冻结-->
                <el-table-column label="操作"  align="center">
				    <template slot-scope="scope">
<!--                        <el-button type="text"  @click="stateClick(scope.row)" :class="scope.row.status === 1 ? '' : 'gray'">{{scope.row.status === 1 ? '冻结' : '已冻结'}} </el-button>-->
                        <!--v-if="scope.row.userType != 1 ? (scope.row.userType != 2?true:false):true" <el-button type="text"  @click="adopt(scope.row)" :class="scope.row.apply === 1 ? '' : 'gray'">{{scope.row.apply === 1 ? '代理通过申请' : ''}} </el-button> -->
                        <el-button v-if="scope.row.userType == 3" size="mini" @click="handleUpdateProduct(scope.row)">编辑</el-button>
					</template>
                </el-table-column>
            </el-table>
			<!-- 页码功能 -->
            <div class="pagination">
                <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="query.pageNum"
                        :page-size="query.pageSize"
                        :total="pageTotal"
                        @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>
<!-- 功能实现 -->
<script>
// 富文本
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
export default {
    name: 'basetable',
    data() {
        return {
            query: {
                pageNum: 1,
                pageSize: 10,
                param: {
                    userType:"",
                    userName:"",
                    status:"",
                    phone:""
                }
            },
            pageTotal:0,
            tableData: [],
            cate:[],
            form:{}
        };
    },
    created() {
        //用户列表
        this.tablist();
    },
    methods: {
        updateStatus(index, row){
            this.publishStatus(row.status, row.id);
        },
        publishStatus(status,id){
            userUpdate({ status, id }).then(res => {
                this.$message({
                    message: '修改成功',
                    type: 'success',
                    duration: 1000
                });
            });
        },

        handlePublishStatusChange(index, row) {
            this.updatePublishStatus(row.vipLevel, row.id);
        },
        updatePublishStatus(vipLevel, id) {
            userUpdate({ vipLevel, id }).then(res => {
                this.$message({
                    message: '修改成功',
                    type: 'success',
                    duration: 1000
                });
            });
        },
        handleUpdateProduct(row) {
            layer.open({
                type: 2,
                area: ['60%', '85%'],
                title: '管理员编辑',
                fixed: true, //不固定
                maxmin: true,
                content: ['/#/userUpdate?id=' + row.id, 'yes']
            });
        },
        //用户列表
		tablist() {
			userList(this.query).then(res => {
                if(res.returnCode == 200){
                    this.tableData = res.data.list;
                    this.pageTotal = res.data.total;
                }else{
                    this.tableData = null;
                    this.pageTotal = 0;
                }
			})
        },
        //上架  下架功能
        stateClick(row) {
            userUpdate({
                id: row.id,
                status: row.status === 1 ? 0 : 1
            }).then(res => {
                if (res.returnCode === 200) {
                    this.$message.success(row.status == 1 ? "已冻结成功" : "已解冻成功");
                    this.tablist();
                }
            }, err => {
                console.log('err--', err);
            });
        },
        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
         // 分页导航
        handlePageChange(val) {
                this.$set(this.query, 'pageNum', val);
                this.tablist();
        },
         // 触发搜索按钮
         handleSearch() {
            this.$set(this.query, 'pageNum', 1);
            this.tablist();
        }
    }
};
</script>

<!-- css样式实现 -->
<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.search-title {
    font-size: 14px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
/* 添加的 */
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 15px;
    color: #8c939d;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
  .avatar {
    width: 50px;
    height: 50px;
    display: block;
  }
  .gray{
      color:#999999;
  }
</style>
